[Rails]Bootstrap制作漂亮flash

發表於 更新於 分類於 ，

Rails有個內建的Flash還蠻好用的，但就是有點簡略，一開始還真不知道怎麼改他的畫面，先用簡單的例子理解它：

隨便創作一個method然後byebug：

controller.rb
1
2
3
4
def test
  flash[:alert] = "Alert!"
  byebug
end

此時在終端機下的byebug之下查看
$ flash
會出現
\<Set: {}>, @flashes={“alert”=>”Alert!”}, @now=nil>
就利用這個特性來客製一下flash的畫面吧！

在Rails最通用的三個flash分別是alert, notice, warning，現在我們看bootstrap的alert，然後挑選自己喜歡的顏色後，準備一個module給flash：
$ touch app/helpers/flashes_helper.rb
建立如下：

flashes_helper.rb
1
2
3
4
5
6
7
8
9
10
11
module FlashesHelper
  FLASH_CLASSES = { alert: "danger", notice: "success", warning: "warning"}.freeze

  def flash_class(key)
    FLASH_CLASSES.fetch key.to_sym
  end

  def user_facing_flashes
    flash.to_hash.slice "alert", "notice","warning"
  end
end

現在還看不懂吧！我們先建立view：

view.html.erb
1
2
3
4
5
6
7
8
<% if flash.any? %>
  <% user_facing_flashes.each do |key, value| %>
    <div class="alert alert-dismissable alert-<%= flash_class(key) %>">
      <button class="close" data-dismiss="alert">×</button>
      <%= value %>
    </div>
  <% end %>
<% end %>

看到第一行if flash.any?如果真的有flash被創造出來才顯示

再來看到user_facing_flashes.each do |key, value|
user_facing_flashes是剛剛創造的helper
如果是剛剛的例子flash.to_hash會出現{“alert”=>”Alert!”}
完整的flash.to_hash.slice “alert”, “notice”,”warning”意思是把key等於這三個的hash都抓出來
意思是如果當前flash的key不包含這三個就會回傳空的hash
回去view看<%= value %>就是Alert!了！

最後<div class="alert alert-dismissable alert-<%= flash_class(key) %>">只是管理css
flash_class利用FLASH_CLASSES.fetch key.to_sym用key抓取value回傳
例如key是alert就會回傳她的vlaue是danger
所以render出了bootstrap的 alert-danger